<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Area</title>
    <link rel="stylesheet" href="/Trees/LayUiBac/layui/css/layui.css" media="all">
</head>
<body>


<div class="layui-container">
    <div class="layui-row" style="border: cadetblue 1px solid;padding: 20px;margin-top: 30px">
        <h1>灾害事件记录</h1>
        <table id="demo" lay-filter="thingTable"></table>

        <div class="layui-col-md4" style="border: cadetblue 1px solid;padding: 20px">

            <input type="text" name="title" required lay-verify="required" id="thingName" placeholder="事件名称"
                   autocomplete="off" class="layui-input">
            <br>

            <input type="text" name="title" required lay-verify="required" id="area" placeholder="发生位置"
                   autocomplete="off" class="layui-input">
            <br>

            <form class="layui-form" action="">
                <label class="layui-form-label">灾害状态</label>
                <div class="layui-input-block">
                    <select name="state" id="state" lay-verify="required">
                        <option value="" selected></option>
                        <option value="已经控制">已经控制</option>
                        <option value="防治中">防治中</option>
                        <option value="需求专家">需求专家</option>
                    </select>
                </div>
            </form>
            <br>
            <label class="layui-form-label">起始时间</label>
            <input type="text" class="layui-input" id="date1" style="width: 100px">
            <br>
            <label class="layui-form-label">结束时间</label>
            <input type="text" class="layui-input" id="date2" style="width: 100px">
            <br>
            <button class="layui-btn" type="button" id="Find">查询</button>
            <button class="layui-btn layui-bg-orange" type="button" id="addNewEvent">添加新的事件</button>
<!--            <button class="layui-btn" type="button" id="inviteExpert">申请专家会审</button>-->
        </div>
    </div>

</div>


<script src="/Trees/LayUiBac/layui/layui.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="alt">修改信息或申请专家</a>
</script>

<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#date1' //指定元素
        });

        laydate.render({
            elem: '#date2'
        })
    });
</script>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
<script>
    layui.use('table', function () {
        let $ = layui.$;
        let layer = layui.layer;
        let table = layui.table;
        //第一个实例
        let show = table.render({
            elem: '#demo'
            , url: '/Trees/thing' //数据接口
            , page: true //开启分页
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "count": res.total, //解析数据长度
                    "data": res.list
                };
            }
            , cols: [[ //表头
                {field: 'time', title: '日期'}
                , {field: 'thingName', title: '事件名称'}
                , {
                    field: 'location', title: '发生位置', templet: function (d) {
                        return d.tClass.area;
                    }
                }
                , {field: 'method', title: '防治方案'}
                , {field: 'state', title: '目前状态'}
                , {fixed: 'right', align: 'center', toolbar: '#barDemo',width:300}
            ]]

        })

        $('#addNewEvent').on('click', function (obj) {
            let data = obj.data
            layer.open({
                type: 2
                , content: '/Trees/LayUiBac/home/disaster/Jump/showThingAdd.html'
                , area: ['600px', '600px']
                , shade: ['0.9', '#393D49']
                , anim: 0
                , maxmin: true
                , btn: ["确认进行添加"]
                , yes: function (index, layero) {
                    let body = layer.getChildFrame('body', index);
                    let thingName = body.find("input[name=thingName]").val()
                    let time = body.find("input[name=time]").val()
                    let method = body.find("input[name=method]").val()
                    // let expertMethod = body.find("input[name=expertMethod]").val()
                    //灾情阶段：选择框
                    let state = body.find("select[name=state]").val()
                    let describe = body.find("input[name=describe]").val()
                    //虫害类型：选择框
                    let type = body.find("select[name=type]").val()
                    let lose = body.find("input[name=lose]").val()
                    //寻找途径：选择框
                    let found = body.find("select[name=found]").val()
                    let size = body.find("input[name=size]").val()
                    //班级下的地区，选择框
                    let area = body.find("select[name=area]").val()

                    let str = "/Trees/thing?method=add" + "&thingName=" + thingName + "&time=" + time + "&methods=" + method + "&state=" + state + "&describe=" + describe + "&type=" + type + "&lose=" + lose + "&found=" + found +"&size="+size+"&classId="+area

                        console.log(str)
                    $.ajax({
                        type: 'get'
                        , url: str
                    })
                    layer.close(index);
                    show.reload();

                }
                , success: function (index, layero) {



                }
            })
        })


        $('#Find').on('click', function () {
            show.reload({
                where: {
                    thingName: $('#thingName').val()
                    , area: $('#area').val()
                    , state: $('#state').val()
                    , date1: $('#date1').val()
                    , date2: $('#date2').val()
                }
                , page: {
                    curr: 1
                }
            })
        })

        table.on('tool(thingTable)', function (obj) {
            let data = obj.data;
            console.log(data)
            let layEvent = obj.event;
            let tr = obj.tr;

            if (layEvent === "detail") {
                layer.open({
                    type: 2
                    , content: "/Trees/LayUiBac/home/disaster/Jump/showThingMsg.html"//填一个url地址
                    , area: ['600px', '600px']
                    , shade: ['0.9', '#393D49']
                    , anim: 0
                    , maxmin: true
                    , btn: ["返回主菜单"]
                    , yes: function (index, layero) {
                        layer.close(index);
                    }
                    , success: function (layero, index) {
                        let body = layer.getChildFrame('body', index);
                        let thingName = body.find("input[name=thingName]").val(data.thingName)
                        let time = body.find("input[name=time]").val(data.time)
                        let method = body.find("input[name=method]").val(data.method)
                        // let expertMethod = body.find("input[name=expertMethod]").val(data.tMeet.result)
                        let state = body.find("input[name=state]").val(data.state)
                        let describe = body.find("input[name=describe]").val(data.describes)
                        let type = body.find("input[name=type]").val(data.type)
                        let lose = body.find("input[name=lose]").val(data.lose)
                        let found = body.find("input[name=found]").val(data.found)
                        let size = body.find("input[name=size]").val(data.size)
                        let area = body.find("input[name=area]").val(data.tClass.area)
                        let className = body.find("input[name=className]").val(data.tClass.className)
                        console.log(data)
                    }
                })
            } else if (layEvent === "alt") {
                layer.open({
                    type: 2
                    , content: "/Trees/LayUiBac/home/disaster/Jump/showThing.html"//填一个url地址
                    , area: ['600px', '600px']
                    , shade: ['0.9', '#393D49']
                    , anim: 0
                    , maxmin: true
                    , btn: ["确认修改"]
                    , yes: function (index, layero) {
                        let body = layer.getChildFrame('body', index);
                        let method = body.find("input[name=method]").val();
                        let state = body.find("select[name=state]").val();
                        let str = "/Trees/thing?method=alt" + "&state=" + state + "&methods=" + method + "&pkId=" + data.pkId
                        console.log(str)
                        $.ajax({
                            type: 'get'
                            , url: str
                        })
                        layer.close(index);
                        show.reload();
                    }
                    , success: function (layero, index) {
                        let body = layer.getChildFrame('body', index);
                        body.find("input[name=thingName]").val(data.thingName)
                        body.find("input[name=time]").val(data.time)
                        body.find("input[name=method]").val(data.method)
                        // body.find("input[name=expertMethod]").val(data.tMeet.result)
                        body.find("select[name=state]").val()
                        body.find("input[name=describe]").val(data.describes)
                        body.find("input[name=type]").val(data.type)
                        body.find("input[name=lose]").val(data.lose)
                        body.find("input[name=found]").val(data.found)
                        body.find("input[name=size]").val(data.size)
                        body.find("input[name=area]").val(data.tClass.area)
                        body.find("input[name=className]").val(data.tClass.className)
                        console.log(data)
                    }
                })
            }
        })
    });
</script>

</body>
</html>